<template>
  <div class="yun-page">
    <div class="yun-card" style='overflow: hidden;'>
      <img class='yun-img1' src="@/assets/img/about/bg1.png" v-if="creenWidth > 480" alt="" />
      <img class='yun-img1' src="@/assets/img/app/about/bg1.png" v-if="creenWidth < 480" alt="" />
      <div class="yun-card1">
        <p class="yun-sbtitle">
          {{ pageData.card1.title }}
        </p>
      </div>
    </div>
    <div class="yun-card">
      <img src="@/assets/img/about/bg2.png" v-if="creenWidth > 480" alt="">
       <img src="@/assets/img/app/about/bg2.png" v-if="creenWidth < 480" alt="">
      <div class='yun-card2'>
        <div class='yun-title'> {{pageData.card2.title}}</div>
        <div class='yun-doc'>
          <p>{{pageData.card2.doc1}}</p>
          <p v-if="creenWidth > 480">{{pageData.card2.doc2}}</p>
        </div>
      </div>
    </div>
    <!-- <div class='yun-points'>
        <img src="@/assets/img/points.png" alt="">
      </div> -->
    <div class="yun-card" style="overflow: hidden">
      
      <img src="@/assets/img/about/bg3.png" v-if="creenWidth > 480" alt="">
      <img src="@/assets/img/app/about/bg3.png" v-if="creenWidth < 480" alt="">
      <div class="yun-point3">
          <img src="@/assets/img/points.png" alt="" />
        </div>
      <div class="yun-card3"  >
        <div class='yun-title'>{{pageData.card3.title}}</div>
        <div class='yun-doc'>
          <p>{{pageData.card3.doc1}}</p>
          <p>{{pageData.card3.doc2}}</p>
        </div>
      </div>
    </div>
    <div class="yun-card">
       <img src="@/assets/img/about/bg4.png" v-if="creenWidth > 480" alt="">
       <img src="@/assets/img/app/about/bg4.png" v-if="creenWidth < 480" alt="">
      <div class="yun-card4" >
        <h3 class="yun-title">{{pageData.card4.title}}</h3>
        <div class="yun-doc">
          {{pageData.card4.doc}}
        </div>
      </div>
    </div>
    <div class='yun-card' style="overflow: hidden">
      <img src="@/assets/img/about/bg5.png" v-if="creenWidth > 480" alt="">
      <img src="@/assets/img/app/about/bg5.png" v-if="creenWidth < 480" alt="">
      <div class='yun5-vbg'> 
      </div>
      <div class="yun-point51">
          <img src="@/assets/img/points.png" alt="" />
        </div>
        <div class="yun-point52">
          <img src="@/assets/img/points.png" alt="" />
        </div>
      <div class='yun-card5' >
          <h3 class='yun-title'>{{pageData.card5.title}}</h3>
          <div class='yun-list'>
            <div class='yun-item' v-for='(item,index) in pageData.card5.list' :key='index'>
              <div class='item-head'>
                <div class='people-header'>
                  <img :src="item.img" alt="">
                </div>
                <div class='people-info'>
                  <p class='dptitle'>{{item.name}}</p>
                  <p class='sbdeptemt'>{{item.tag}}</p>
                </div>
              </div>
              <div class='itemdoc'>{{item.doc}}</div>
            </div>
          </div>
      </div>
    </div>
    <div class='yun-card'>
       <img src="@/assets/img/about/bg6.png" v-if="creenWidth > 480" alt="">
       <img src="@/assets/img/app/about/bg6.png" v-if="creenWidth < 480" alt="">
       <div class='yun6-vbg'>         
      </div>
       <div class="yun-card6">
         <div class='yun-title'>{{pageData.card6.title}}</div>
           <div class='yun-list'>
              <div class='yun-item' v-for="(item,index) in pageData.card6.list" :key='index' @click="routeToPage(item.router)">
                <div class='item-left'>
                  <div class='yun-item-title'>
                    <h3>{{item.title}}</h3>
                    <p>{{item.doc}}</p>
                  </div>
                  <div class='yun-new'>
                    <img src="@/assets/img/about/new.png" alt="">
                  </div>
                </div>
                <img class='aboutSan' src="@/assets/img/about/about-san.png" alt="">
              </div>
            </div>
          <div class='yun-sbtitle'>{{pageData.card6.btitle}}</div>
          <div class='yun-tptitle'>{{pageData.card6.bdoc}}</div>
       </div>
     </div>
    <div class="yun-card">
      <div class="blue-card"></div>
      <div class="yun-card7" >
        <div class="yun-points">
          <img src="@/assets/img/points.png" alt="" />
        </div>
        <div class="yun-left">
          <h3 class="yun-title" style='max-width:400px;'>{{pageData.card7.title}}</h3>
          <a :href="pageData.pdf" target="_blank" rel="noopener noreferrer"><div class="yun-btn">{{pageData.card7.btn}}</div></a>
        </div>
        <div class="yun-right">
          <img src="@/assets/img/app.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "about",
  components: {},
  data() {
    return {
      pageData: this.$lang[this.$store.state.lang].about,
      creenWidth: document.body.clientWidth,
      scrollTop:null
    };
  },
  created(){
     window.addEventListener('scroll',this.handleScroll,true)
  },
  methods: {
    routeToPage(path) {
      this.$router.push(path);
    },
    handleScroll(){
      this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    },
  },
  watch: {
    "$store.state.lang"(val) {
      this.pageData = this.$lang[this.$store.state.lang].about;
    },
  },
};
</script>
<style lang='scss' scoped>
.yun-page {
  width: 100%;
  margin: 0 auto;
  .yun-card {
    width: 100%;
    position: relative;
    &>img{
      width:100%;
    }
    .yun-card1 {
      width:1100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .yun-sbtitle {
        width: 100%;
        font-size: 24px;
        color: #828282;
        line-height: 36px;
        margin: 0 auto;
      }
    }
    .yun-card2 {
      width:800px;
      position: absolute;
      top: -12%;
      left: 50%;
      transform: translate(-50%, 0);
      background: #ffffff;
      box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
      border-radius: 10px;
      padding: 30px 20px 20px;
      animation:runkey5 1s;
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
        line-height: 32px;
        text-align: center;
      }
      .yun-doc {
        margin-top: 20px;
        p {
          font-size: 16px;
          color: #31313b;
          line-height: 24px;
          text-align: center;
          margin-bottom: 10px;
        }
      }
    }
    .yun-card3 {
      width:1000px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
        line-height: 24px;
        text-align: center;
      }
      .yun-doc {
        margin-top: 30px;
        width: 100%;
        p {
          font-size: 18px;
          color: #31313b;
          line-height: 28px;
          text-align: center;
          margin-bottom: 10px;
        }
      }
    }
    .yun-card4 {
      width:1000px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
      .yun-doc {
        width: 100%;
        margin-top: 20px;
        font-size: 18px;
        color: #fff;
        line-height: 28px;
        text-align: center;
      }
  
    }
    .yun5-vbg {
      width: 1200px;
      height: 50%;
      background: #e2eff8;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .yun-card5 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
      }
      .yun-list {
        width: 1200px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 40px;
        .yun-item {
          width: 540px;
          height: 320px;
          background: #ffffff;
          box-shadow: 0px 13px 49px 0px rgba(14, 25, 152, 0.32);
          border-radius: 10px;
          margin-right: 30px;
          margin-bottom: 30px;
          padding: 20px;
          cursor: pointer;
          &:nth-child(2n) {
            margin-right: 0;
          }
          &:hover {
            transform: scale(1.02);
          }
          .item-head {
            width: 100%;
            display: flex;
            position: relative;
            .people-header {
              width: 80px;
              height: 80px;
              img {
                width: 100%;
              }
            }
            .people-info {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              margin-left: 20px;
              .dptitle {
                font-size: 28px;
                font-weight: bold;
                color: #31313b;
              }
              .sbdeptemt {
                font-size: 18px;
                color: #31313b;
                margin-top: 8px;
              }
            }
          }
          .itemdoc {
            margin-top: 8px;
            font-size: 16px;
            font-weight: 400;
            color: #31313b;
            line-height: 24px;
            text-align: justify; // 所有行两端对齐
            text-justify: inter-ideograph;
          }
        }
      }
      
    }
    .yun6-vbg {
      width: 1154px;
      height: 300px;
      background: #e2eff8;
      border-radius: 10px;
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .yun-card6 {
      width: 1000px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #fefeff;
        text-align: center;
      }
      .yun-sbtitle {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-top: 64px;
      }
      .yun-tptitle {
        font-size: 18px;
        color: #dbdada;
        line-height: 28px;
        margin-top: 10px;
        text-align: center;
      }
      .yun-list {
        margin-top: 64px;
        .yun-item {
          width: 100%;
          padding: 20px 30px 20px;
          height: 80px;
          background: #ffffff;
          box-shadow: 0px 19px 54px 0px rgba(58, 68, 179, 0.48);
          border-radius: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          margin-bottom: 30px;
          .item-left {
            display: flex;
            align-items: center;
          }
          .yun-item-title {
            h3 {
              font-size: 28px;
              font-weight: bold;
              color: #31313b;
            }
            P {
              font-size: 16px;
              color: #31313b;
              margin-top: 8px;
            }
          }
          .yun-new {
            width: 60px;
            margin-left: 40px;
            img {
              width: 100%;
            }
          }
          .aboutSan {
            width: 17px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
     .blue-card {
      width: 45%;
      height: 80%;
      background: #e2eff8;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    .yun-card7 {
      width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      .yun-points {
        position: absolute;
        left: 46%;
        top: 60px;
        width: 160px;
        img {
          width: 100%;
        }
      }
      .yun-left {
        width: 45%;
        .yun-title {
          font-size: 32px;
          font-weight: bold;
          color: #31313b;
          line-height: 71px;
        }
        .yun-btn {
          width: 160px;
          height: 50px;
          background: #404fe0;
          box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
          border-radius: 8px;
          font-size: 16px;
          color: #ffffff;
          text-align: center;
          line-height: 50px;
          margin-top: 90px;
          cursor: pointer;
        }
      }
      .yun-right {
        width: 40%;
        position: relative;
        top: 22px;
        z-index: 10;
        animation: runkey3 2s linear infinite alternate;
        img {
          width: 100%;
        }
      }
    }
  }
  .yun-point3{
    position: absolute;
    left:10px;
    bottom:10px;
    width:160px;
    img{
      width:100%;
    }
  }
  .yun-point51{
    position: absolute;
    left:0px;
    top:17%;
    width:160px;
    img{
      width:100%;
    }
  }
  .yun-point52{
    position: absolute;
    right:4%;
    bottom:13%;
    width:160px;
    img{
      width:100%;
    }
  }
}
.yun-img1{
  animation: runkey1 2s linear 2s infinite alternate;
}
@media screen and (max-width: 480px) {
  .yun-page {
    width: 100%;
    margin: 0 auto;
    .yun-card {
      width: 100%;
      position: relative;
      &>img{
        width:100%
      }
      .yun-card1 {
        width:96%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top:13%;
        text-align: center;
        .yun-sbtitle {
          width: 90%;
          font-size: 18px;
          color: #828282;
          line-height: 24px;
          margin: 0 auto;
        }
      }
      .yun-card2 {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 90%;
        height: auto;
        background: #ffffff;
        box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
        border-radius: 10px;
        padding: 15px 10px 15px;
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
          line-height: 30px;
          text-align: center;
        }
        .yun-doc {
          margin-top: 10px;
          p {
            font-size: 14px;
            color: #31313b;
            line-height: 24px;
            text-align: center;
            margin-bottom: 0px;
          }
        }
      }
      .yun-card3 {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        width:90%;
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
          line-height: 30px;
          text-align: center;
        }
        .yun-doc {
          margin-top: 10px;
          width: 100%;
          p {
            font-size: 14px;
            color: #31313b;
            line-height: 24px;
            text-align: center;
            margin-bottom: 5px;
          }
        }
      }
      .yun-card4 {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translate(-50%, 0);
        width:100%;
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #fff;
          text-align: center;
        }
        .yun-doc {
          width: 94%;
          margin:8px auto;
          font-size: 14px;
          color: #fff;
          line-height: 20px;
          text-align: center;
        }
      }
      .yun5-vbg {
        width: 96%;
        height: 84%;
        background: #e2eff8;
        border-radius: 8px;
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .yun-card5 {
        width: 100%;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
        }
        .yun-list {
          width:100%;
          display: block;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 10px;
          .yun-item {
            width: 90%;
            height: auto;
            margin:0 auto 15px;
            background: #ffffff;
            box-shadow: 0px 13px 49px 0px rgba(14, 25, 152, 0.32);
            border-radius: 10px;
            padding: 10px ;
            cursor: pointer;
            &:nth-child(2n) {
              margin-right: auto;
            }
            &:hover {
              transform: scale(1.02);
            }
            .item-head {
              width: 100%;
              display: flex;
              position: relative;
              .people-header {
                width: 60px;
                height: 60px;
                img {
                  width: 100%;
                }
              }
              .people-info {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                margin-left: 10px;
                .dptitle {
                  font-size: 24px;
                  font-weight: bold;
                  color: #31313b;
                }
                .sbdeptemt {
                  font-size: 14px;
                  color: #31313b;
                  margin-top: 6px;
                }
              }
            }
            .itemdoc {
              margin-top: 4px;
              font-size: 14px;
              font-weight: 400;
              color: #31313b;
              line-height: 16px;
              text-align: justify; // 所有行两端对齐
              text-justify: inter-ideograph;
            }
          }
        }
      }
      .yun6-vbg {
        width: 96%;
        height: 200px;
        background: #e2eff8;
        border-radius: 10px;
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .yun-card6 {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .yun-title {
          font-size: 24px;

          font-weight: bold;
          color: #fefeff;
          text-align: center;
        }
        .yun-sbtitle {
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
          text-align: center;
          margin-top: 20px;
        }
        .yun-tptitle {
          font-size: 14px;
          color: #dbdada;
          line-height: 30px;
          margin-top: 6px;
          text-align: center;
        }
        .yun-list {
          width:94%;
          margin:36px auto 30px;
          .yun-item {
            width: 100%;
            padding: 15px 20px 10px;
            height: auto;
            background: #ffffff;
            box-shadow: 0px 19px 54px 0px rgba(58, 68, 179, 0.48);
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-bottom: 20px;
            .item-left {
              display: flex;
              align-items: center;
            }
            .yun-item-title {
              h3 {
                font-size: 20px;
                font-weight: bold;
                color: #31313b;
              }
              P {
                font-size: 14px;
                color: #31313b;
                margin-top: 8px;
              }
            }
            .yun-new {
              width: 60px;
              margin-left: 20px;
              img {
                width: 100%;
              }
            }
            .aboutSan {
              width: 12px;
              margin-left:15px;
              img {
                width: 100%;
              }
            }
          }
        }
      }
       .blue-card{
      width: 80%;
      height: 240px;
      background: #E2EFF8;
      position: absolute;
      right:0;
      bottom:0;
      z-index: -1;
    }
    .yun-card7{
        width:100%;
        margin:0 auto;
        display: block;
        justify-content: space-between;
        align-items: center;
        padding-top:30px;
        .yun-points {
          position: absolute;
          left: 0;
          top: 45%;
          width: 115px;
          height: 57px;
          img{
            width:100%;
          }
        }
        .yun-left {
          width: 100%;
          .yun-title {
            font-size: 24px;
            font-weight: bold;
            color: #31313B;
            line-height: 32px;
            text-align: center;
            margin:0 auto;
            width:80%;
          }
          a{
            display: block;
            margin: 0 auto;
          }
          .yun-btn {
            width: 180px;
            height: 40px;
            background: #404FE0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 4px;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            margin: 30px auto;
            cursor: pointer;
          }
        }
        .yun-right {
          height: 300px;
          width:100%;
          position: relative;
          top:22px;
          right:10px;
          display: flex;
          justify-content: flex-end;
          z-index: 10;
          img {
            width:auto;
            height: 100%;
          }
        }
    }
    }
    .yun-point3{
    position: absolute;
    left:-6%;
    bottom:10px;
    width:110px;
    img{
      width:100%;
    }
  }
  .yun-point51{
    position: absolute;
    left:0px;
    top:6%;
    width:110px;
    img{
      width:100%;
    }
  }
  .yun-point52{
    position: absolute;
    right:2%;
    bottom:2%;
    width:110px;
    img{
      width:100%;
    }
  }
  }
}
@keyframes runkey1{
   0%{
      opacity: 1;
      transform: scale(1);
   }
   50%{
      opacity: 0.8;
      transform: scale(1.1);
   }
   100%{
       opacity: 1;
       transform: scale(1);
   }
}
@keyframes runkey2{
   0%{
      transform: scale(0);
   }
   100%{
       transform: scale(1);
   }
}

@keyframes runkey3{
   0%{
       transform: translateY(0px);
   }
   50%{
     transform: translateY(-20px);
   }
   100%{
        transform: translateY(0px);
   }
}
@keyframes runkey4{
   0%{
       transform: scale(1);
   }
   50%{
     transform: scale(1.05);
   }
   100%{
        transform: scale(1);
   }
}
@keyframes runkey5{
   0%{
      top:40px;
   }
   100%{
      top:-150;
   }
}
</style>
